import  React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

// 属性数据类型
type MODEL_DATA_ITEM ={
  id: string,
  label: string,
  value: string
}

type MODEL = {
  data: MODEL_DATA_ITEM[],
  label: string,
  type: string,
  value: string
}
type ATTRS_CHILD = {
  model: MODEL
}
type ATTRS = {
  label: string,
  type: string,
  child: ATTRS_CHILD
}
// 样式数据类型
type STYLE_CHILD = {
  pagePadding: VALUE,
  cmpUpperPadding: VALUE,
  cmpLowerPadding: VALUE,
  cmpUpperRadius: VALUE,
  cmpLowerRadius: VALUE,
  titleSize: VALUE,
  titleColor: VALUE,
  cmpBackground: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}

interface Props {
  attrs: ATTRS;
  styles: STYLE;
  value: VALUE;
};

// 做一个数据个映射
const styleTable = {
  pagePadding: "padding",
  cmpUpperPadding: "paddingTop",
  cmpLowerPadding: "paddingBottom",
  // cmpUpperRadius: {
  //   border-top-left-radius: 
  // },
  // cmpLowerRadius: VALUE,
  titleSize: "fontSize",
  titleColor: "color",
  cmpBackground: "backgroundColor",
}

const HeText = (props: Props) => {
  const {attrs, styles, value} = props;
  const [comStyle, setComStyle] = useState({});
  const handleStyle = (child, model) => {
    let obj = {};
    for (let key in child) {
      const element = child[key];
      if(styleTable[key] == 'color' ||  styleTable[key] == 'backgroundColor') {
        obj[styleTable[key]] = element.value;
      } else if (key == 'cmpUpperRadius') {
        obj["borderTopLeftRadius"] = element.value + 'px'
        obj["borderTopRightRadius"] = element.value + 'px'
      }else if (key == 'cmpLowerRadius') {
        obj["borderBottomLeftRadius"] = element.value + 'px'
        obj["borderBottomRightRadius"] = element.value + 'px'
      }else {
        obj[styleTable[key]] = element.value + 'px'
      }
    }
    if(model?.value) {
      obj['textAlign'] = model?.value
    }
    return obj;
  }
  useEffect(() => {
    let s = handleStyle(styles?.child, attrs?.child?.model);
    setComStyle(s) 
  }, [styles]);

  return (
    <View style={comStyle} className='index'>
      <Text >{value?.value}</Text>
    </View>
  )
}

export default HeText;